<template>
    <div class="design">
        <br>
        <div class="container">
            <div class="title"><img src="~assets/index/designtitle.png" alt=""></div>
            <div class="pics">
                <div class="top">
                    <div class="item-left item item1"><img src="~assets/index/design-1.jpg" alt=""></div>
                    <div class="item item1"><img src="~assets/index/design-2.jpg" alt=""></div>
                </div>
                <div class="middle">
                    <div class="itemBig"><img src="~assets/index/design-3.jpg" alt=""></div>
                    <div><img src="~assets/index/design-4.png" alt=""></div>
                    <div>
                        <div class="item item2"><img src="~assets/index/design-4.jpg" alt=""></div>
                        <div class="mid-bot">
                            <div class="item "><img src="~assets/index/design-5.jpg" alt=""></div>
                            <div class="item "><img src="~assets/index/design-6.jpg" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="bot">
                    <div class="item bot-left"><img src="~assets/index/design-7.jpg" alt=""></div>
                    <div class="item "><img src="~assets/index/design-8.jpg" alt=""></div>
                    <div class="item "><img src="~assets/index/design-9.jpg" alt=""></div>
                </div>
            </div>
        </div>
            
    </div>
</template>

<script>
export default {
      name:'IndexDesign',
        
        data (){
            return {
             
            }
        },
        methods: {
           
            
        },
}
</script>
<style lang="stylus" scoped>
@import '~assets/varibles.styl'
img
    transition all 0.3s   
.design 
    height 1000px
    background url('~assets/index/designBG.png') no-repeat center center
    .container
        position relative
        
        width $container
        margin $center
        .title
            width 478px
            margin-top 150px
        .pics
            width 1230px    
            position absolute 
            top -50px
            left -16px
            
            .top
                overflow hidden
            .top>div
                float left
            .item-left
                margin-left 614px
            .middle
                overflow hidden
            .middle>div
                float left
                .item2
                    width 205px
                .mid-bot
                    overflow hidden
                .mid-bot>div
                    float left
            .bot
                overflow hidden
            .bot>div
                float   left
            .bot-left
                margin-left 409px 
            .item
                box-sizing border-box
                overflow hidden
                width 205px
                height 205px
                transition all 0.3s 
                border 0 solid #00a6b9    
            .item:hover
                border 6px solid #00a6b9 
                transition all 0.3s  
            .itemBig
                box-sizing border-box
                overflow hidden
                width 409px
                height 409px 
                border 0 solid #00a6b9  
            .itemBig:hover     
                border 6px solid #00a6b9  
                 
        .pics div
            transition all 0.3s   
                                    
</style>
